<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>SVG/CSS3实现按钮点击波纹动画DEMO演示03</title>
	<meta name="description" content="Demo 3 for the tutorial: Creating Google Material Design Ripple Effects with SVG" />
	<meta name="keywords" content="svg, ripple effect, google material design, radial action, GreenSock, css, tutorial" />
	<meta name="author" content="Dennis Gaebel for Codrops" />
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/demo.css" />
	<link rel="stylesheet" type="text/css" href="css/component.css" />
	<!--[if IE]>
	  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>

<body class="theme-3">
	<!-- SVG Sprite -->
	<div style="height: 0; width: 0; position: absolute; visibility: hidden;" aria-hidden="true">
		<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false">
			<symbol id="ripply-scott" viewBox="0 0 100 100">
				<g>
					<polygon points="5.6,77.4 0,29 39.1,0 83.8,19.3 89.4,67.7 50.3,96.7" />
					<polygon fill="rgba(255,255,255,0.35)" transform="scale(0.5), translate(50, 50)" points="5.6,77.4 0,29 39.1,0 83.8,19.3 89.4,67.7 50.3,96.7" />
					<polygon fill="rgba(255,255,255,0.25)" transform="scale(0.25), translate(145, 145)" points="5.6,77.4 0,29 39.1,0 83.8,19.3 89.4,67.7 50.3,96.7" />
				</g>
			</symbol>
		</svg>
	</div>
	<!-- /end sprite -->
	<div class="container">
		<header class="codrops-header">
			<h1>SVG Ripples <span>Google Material Design Ripple Effect with SVG</span></h1>
			<nav class="codrops-demos">
				<a href="index.html">circle</a>
				<a href="index2.html">circle &amp; radialGradient</a>
				<a class="current-demo" href="index3.html">polygon</a>
				<a href="index4.html">rect &amp; linearGradient</a>
			</nav>
		</header>
		<div class="content">
			<!-- button component -->
			<button id="js-ripple-btn" class="button styl-material">
				Click for Ripple
				<svg class="ripple-obj" id="js-ripple">
					<use width="4" height="4" xlink:href="#ripply-scott" class="js-ripple"></use>
				</svg>
			</button>
			<!-- /end button component -->
		</div>
		<div style="text-align:center;clear:both">
		<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
		<script src="/follow.js" type="text/javascript"></script>
		</div>
	</div>
	<!-- /container -->
	<!-- GreenSock Power : Required for Demo -->
	<script src="js/TweenMax.min.js"></script>
	<script src="js/ripple-config.js"></script>
</body>

</html>
